<script setup lang="ts">
  import { ElMenuItemGroup } from 'element-plus'
  import { StrUtil } from '@xtail/core'
  import { XMenuItem } from '../XMenuItem'
  import { MenuItemGroupPropsType } from './types'

  defineOptions({
    name: 'XMenuItemGroup'
  })

  withDefaults(defineProps<MenuItemGroupPropsType>(), {
    title: '',
    children: [] as any
  })

  const slots = defineSlots()
</script>

<template>
  <el-menu-item-group class="x-menu-item-group">
    <template #title>
      <slot name="title" :title="title">
        <div class="x-menu-item-group__title">
          <div v-if="StrUtil.isStr(title)">{{ title }}</div>
          <component :is="title" v-else v-bind="titleProps" />
        </div>
      </slot>
    </template>
    <template #default>
      <slot name="default">
        <template v-if="children.length > 0">
          <x-menu-item v-for="(item, index) in children" :key="index" v-bind="item">
            <template v-if="slots['menu-item-icon']" #icon="scopedData">
              <slot name="menu-item-icon" v-bind="scopedData" />
            </template>
            <template v-if="slots['menu-item-title']" #title="scopedData">
              <slot name="menu-item-title" v-bind="scopedData" />
            </template>
          </x-menu-item>
        </template>
      </slot>
    </template>
  </el-menu-item-group>
</template>

<style lang="scss">
  @use './style' as *;
</style>
